<template>
  <scroll-view @scrolltolower="questions.getList()" class="w-full h-full overflow-scroll">
    <div
      class="item w-full p-20px box-border relative"
      v-for="(i, index) in questionsList"
      :key="index"
    >
      <div class="intro text-A3A3A3" :style="i.isCreatedBySelf ? 'max-width: 4.5rem;' : ''">
        {{ i.createTime }}<span class="px-10px">|</span>{{ i.typeName ? i.typeName : '未选题型'
        }}<span class="px-10px">|</span>{{ i.difficultyLevel | getDifficultyLevelName }}
      </div>
      <div class="mt-11px">
        <Choose
          :ref="`choose_${index}`"
          :question="i"
          v-if="i.stem.structure_type === 'collector.choose'"
        />
        <Dialogue
          :ref="`dialogue_${index}`"
          :question="i"
          v-if="i.stem.structure_type === 'collector.dialogue'"
        />
        <Read
          :ref="`read_${index}`"
          :question="i"
          v-if="i.stem.structure_type === 'collector.read'"
        />
        <Fill
          :ref="`fill_${index}`"
          :question="i"
          v-if="i.stem.structure_type === 'collector.fill'"
        />
        <Picture
          :ref="`picture_${index}`"
          :question="i"
          v-if="i.stem.structure_type === 'collector.picture'"
        />
      </div>
      <div class="btn-group absolute flex text-white">
        <div class="btn-item px-8px bg-FF4040 flex items-center" @click="questions.remove(i.id)">
          <span>移出错题</span>
        </div>
      </div>
    </div>
    <LoadMore
      cssStyle="padding:0;"
      :loading="questions.loading"
      :has-more="questions.hasMore"
      @click="questions.getList()"
    />
  </scroll-view>
</template>

<script>
import ScrollView from '@/components/scroll-view'
import LoadMore from '@/components/load-more'
import Choose from './components/choose'
import Dialogue from './components/dialogue'
import Read from './components/read'
import Fill from './components/fill'
import Picture from './components/picture'

export default {
  components: {
    ScrollView,
    LoadMore,
    Choose,
    Dialogue,
    Read,
    Fill,
    Picture
  },
  filters: {
    getDifficultyLevelName(val) {
      switch (val) {
        case '17':
          return '容易'
        case '18':
          return '较易'
        case '19':
          return '适中'
        case '20':
          return '较难'
        case '21':
          return '困难'
        default:
          return '未选难度'
      }
    }
  },
  props: {
    questions: {
      type: Object,
      default: () => {
        return {
          list: [],
          getList: () => {}
        }
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    questionsList() {
      const {
        questions: { list }
      } = this

      try {
        return list.map((i) => {
          if (typeof i.stem != 'object') {
            i.stem = JSON.parse(i.stem)
          }

          if (typeof i.answer != 'object') {
            i.answer = JSON.parse(i.answer)
          }

          if (i.answerRecord && typeof i.answerRecord != 'object') {
            i.answerRecord = JSON.parse(i.answerRecord)
          }

          return i
        })
      } catch (error) {
        return []
      }
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.item {
  min-height: 179px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;

  &:not(:last-child) {
    margin-bottom: 20px;
  }

  .intro {
    font-size: 16px;
    line-height: 22px;
    max-width: 640px;
  }

  .image {
    width: 220px;
    height: 106px;
  }

  .btn-group {
    right: 20px;
    top: 20px;

    .btn-item {
      height: 28px;
      font-size: 18px;
      border-radius: 4px;
      line-height: normal;
    }
  }
}
</style>
